<template>
    <div class="main-container">
        <!-- 查询条件 -->
        <div class="query-container">
            <div class="query-title">查询条件</div>
            <div class="query-condition">
                <el-form
                    ref="queryParams"
                    :model="queryParams"
                    label-width="80px"
                    size="mini"
                    inline
                >
                    <el-row>
                        <el-form-item label="权限名称">
                            <el-input
                                v-model="queryParams.menuName"
                                placeholder="请输入权限名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="权限标识">
                            <el-input
                                v-model="queryParams.menuKey"
                                placeholder="请输入权限标识"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="getTreeMenu"
                                :loading="queryLoading"
                            >查询
                            </el-button>
                            <el-button @click="resetQueryForm">重置</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- 按钮工具栏 -->
        <div class="query-button-toolbar">
            <el-button
                type="primary"
                size="mini"
                @click="openAddOrEditDialog('', 'add')"
            >新 增
            </el-button>
        </div>
        <!-- 查询结果 -->
        <div class="query-container">
            <div class="query-title">查询结果</div>
            <div class="query-table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    size="small"
                    empty-text="空空如也"
                    stripe
                    border
                    v-loading="loading"
                    row-key="mid"
                >
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                        prop="mid"
                        label="权限ID"
                        show-overflow-tooltip
                        width="120"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="menuName"
                        label="权限名称"
                        show-overflow-tooltip
                        width="140"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="menuKey"
                        label="权限标识"
                        show-overflow-tooltip
                        width="140"
                    >
                    </el-table-column>
                    <el-table-column prop="menuType" label="权限类型" show-overflow-tooltip width="80" align="center">
                        <template v-slot="scope">
                            <span v-if="scope.row.menuType === '01'"><el-tag size="small">目录</el-tag></span>
                            <span v-if="scope.row.menuType === '02'"><el-tag type="success" size="small">菜单</el-tag></span>
                            <span v-if="scope.row.menuType === '03'"><el-tag type="warning" size="small">权限</el-tag></span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="menuIcon"
                        label="权限图标"
                        show-overflow-tooltip
                        width="80" align="center"
                    >
                        <template v-slot="scope">
                            <i :class="scope.row.menuIcon" style="font-size: 16px;color: #909399;"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="url" label="请求地址" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="component"
                        label="组件路径"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column
                        prop="createTime"
                        label="创建日期"
                        show-overflow-tooltip
                        width="150"
                    >
                    </el-table-column>
                    <el-table-column label="操作" width="140">
                        <template slot-scope="scope">
                            <el-button
                                @click="openAddOrEditDialog(scope.row, 'add')"
                                type="text"
                                size="small"
                            >新增
                            </el-button>
                            <el-button
                                type="text"
                                size="small"
                                @click="openAddOrEditDialog(scope.row, 'edit')"
                            >编辑
                            </el-button>
                            <el-button
                                type="text"
                                size="small"
                                @click="deleteAction(scope.row.mid)"
                            >删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 新增修改弹出框 -->
        <el-dialog
            :title="dialog.title"
            :visible.sync="dialog.visible"
            :close-on-click-modal="dialog.closeOnClickModal"
        >
            <el-form
                :model="createForm"
                :rules="createFormRules"
                ref="createForm"
                size="mini"
            >
                <el-input v-model="createForm.mid" v-show="false"></el-input>
                <el-form-item label="上级权限" label-width="120px" prop="pid">
                    <el-input
                        :disabled="true"
                        v-model="createForm.pid"
                        placeholder="请输入上级权限"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权限名称" label-width="120px" prop="menuName">
                    <el-input
                        v-model="createForm.menuName"
                        placeholder="请输入权限名称"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权限标识" label-width="120px" prop="menuKey">
                    <el-input
                        v-model="createForm.menuKey"
                        placeholder="请输入权限唯一标识"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权限类型" label-width="120px" prop="menuType">
                    <el-radio-group v-model="createForm.menuType">
                        <el-radio label="01">目录</el-radio>
                        <el-radio label="02">菜单</el-radio>
                        <el-radio label="03">权限</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="请求地址" label-width="120px" prop="url">
                    <el-input
                        v-model="createForm.url"
                        placeholder="请输入请求地址"
                    ></el-input>
                </el-form-item>
                <el-form-item label="组件路径" label-width="120px" prop="component">
                    <el-input
                        v-model="createForm.component"
                        placeholder="请输入组件路径"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权限图标" label-width="120px" prop="menuIcon">
                    <el-input
                        v-model="createForm.menuIcon"
                        placeholder="请输入权限图标"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    size="mini"
                    v-if="dialog.btnType"
                    @click="addMenu"
                >新 增
                </el-button>
                <el-button type="primary" size="mini" v-else @click="editMenu"
                >编 辑
                </el-button>
                <el-button size="mini" @click="closeAddAndEditDialog">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    createMenu,
    removeMenu,
    updateMenu,
    queryTreeMenu,
} from "@/api/sys/menu";

export default {
    name: "MenuIndex",
    data() {
        return {
            pageParams: {
                pageCount: 0,
                pageNum: 1,
                pageSize: 10,
            },
            queryParams: {},
            tableData: [],
            loading: false,
            queryLoading: false,
            dialog: {
                title: "新增权限",
                visible: false,
                closeOnClickModal: false,
                btnType: true,
            },
            detailDialog: {
                visible: false,
                closeOnClickModal: false,
            },
            createForm: {
                mid: '',
                menuName: '',
                menuKey: '',
                menuType: '01',
                menuIcon: '',
                component: '',
                pid: '',
                url: ''
            },
            createFormRules: {
                menuName: [
                    {required: true, message: "请输入权限名称", trigger: "blur"},
                    {
                        min: 1,
                        max: 30,
                        message: "长度在 1 到 30 个字符",
                        trigger: "blur",
                    },
                ],
                menuKey: [
                    {required: true, message: "请输入权限标识", trigger: "blur"},
                    {
                        min: 1,
                        max: 30,
                        message: "长度在 1 到 30 个字符",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.getTreeMenu();
    },
    methods: {
        /** 查询权限树 */
        getTreeMenu() {
            const _this = this;
            _this.loading = true;
            queryTreeMenu(_this.queryParams).then((resp) => {
                if (resp.code === 20000) {
                    _this.tableData = resp.data;
                } else {
                    _this.$message.warning(resp.message);
                }
                _this.loading = false;
            }).catch((error) => {
                _this.$message.warning(error.message);
                _this.loading = false;
            });
        },
        /** 重置查询条件 */
        resetQueryForm() {
            console.log("reset form");
            this.queryParams = {};
        },
        /** 删除操作 */
        deleteAction(id) {
            const _this = this;
            _this.$confirm("是否删除当前行数据?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                type: "warning",
            }).then(() => {
                removeMenu(id).then((resp) => {
                    if (resp.code === 20000) {
                        _this.$message.success(resp.message);
                        _this.getTreeMenu();
                    } else {
                        _this.$message.warning(resp.message);
                    }
                }).catch((error) => {
                    _this.$message.warning(error.message);
                });
            }).catch(() => {});
        },
        /** 打开编辑弹出框 */
        openAddOrEditDialog(row, type) {
            const _this = this;
            _this.$nextTick(function () {
                if (row && type === "edit") {
                    // 编辑
                    _this.createForm.mid = row.mid;
                    _this.createForm.menuName = row.menuName;
                    _this.createForm.menuKey = row.menuKey;
                    _this.createForm.menuType = row.menuType;
                    _this.createForm.menuIcon = row.menuIcon;
                    _this.createForm.component = row.component;
                    _this.createForm.pid = row.pid;
                    _this.createForm.url = row.url;
                    _this.dialog.title = "编辑权限";
                    _this.dialog.btnType = false;
                } else {
                    // 新增
                    _this.dialog.title = "新增权限";
                    _this.dialog.btnType = true;
                    if (row) {
                        _this.createForm.pid = row.mid;
                    } else {
                        _this.createForm.pid = -1;
                    }
                }
                _this.dialog.visible = true;
                console.log("open dialog");
            });
        },
        /** 新增权限 */
        addMenu() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid) {
                    createMenu(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.getTreeMenu();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 编辑权限 */
        editMenu() {
            const _this = this;
            _this.$refs.createForm.validate((valid) => {
                if (valid) {
                    updateMenu(_this.createForm).then((resp) => {
                        if (resp.code === 20000) {
                            _this.$message.success(resp.message);
                            _this.closeAddAndEditDialog();
                            _this.getTreeMenu();
                        } else {
                            _this.$message.warning(resp.message);
                        }
                    }).catch((error) => {
                        _this.$message.warning(error.message);
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        /** 关闭弹出框 */
        closeAddAndEditDialog() {
            this.$refs.createForm.clearValidate();
            this.createForm.mid = '';
            this.createForm.menuName = '';
            this.createForm.menuKey = '';
            this.createForm.menuType = '01';
            this.createForm.menuIcon = '';
            this.createForm.component = '';
            this.createForm.pid = '';
            this.createForm.url = '';
            this.dialog.visible = false;
        },
        /** methods end */
    },
};
</script>

<style lang="scss" scoped>
</style>